<script setup>
import { onBeforeUnmount, onMounted } from 'vue';
import * as Cesium from 'cesium';
import { CURRENT_CONFIG } from '@/apis';
import arealabel from '@/assets/json/arealabel.json';
import {
  cesiumMapInit,
  cameraPath,
  CESIUM_ADD_REGION_LABEL,
  CESIUM_REMOVE_PROTECT_LABEL,
  CLEAR_MAP_DATA_SOURCES,
  CLEAR_MAP_ENTITIES,
  CLEAR_MAP_PRIMITIVES,
  clearArealabelList,
  getCesiumMap,
  destroyCesiumViewer,
  CESIUM_ADD_LAYER,
} from '@/cesium-utils/js/launch-cesium-js';
import PersonalCenterIndex from '../module-personal-center/index.vue';
import CircleCardCarousel from './CircleCardCarousel.vue';
import LaunchHeadersIndex from './LaunchHeadersIndex.vue';

let cesiumMapLaunch = null;
let time = null;
let terrainTimeoutId = null;
let isDestroyed = false; // 👈 标志位：组件是否已销毁

onMounted(() => {
  cesiumMapInit('map-launch').then(async (map) => {
    cesiumMapLaunch = map;

    CESIUM_ADD_LAYER('ths:system_dept', 'linchang'); //天华山图层

    cesiumMapLaunch.camera.flyTo({
      destination: {
        x: -1713584.1232804453,
        y: 5180407.357649094,
        z: 3509714.765668146,
      },
      orientation: {
        heading: 0.03203998678402975,
        pitch: -1.008946433550622,
        roll: 0.00018979640637351025,
      },
      complete: function callback() {
        if (!isDestroyed) {
          callBackAnimation();
        }
      },
    });
  });
});

/**
 * 动画效果(贺兰山动画)
 */
// const callBackAnimation = async () => {
//   // ✅ 检查是否已销毁
//   if (isDestroyed || !cesiumMapLaunch) return;

//   CLEAR_MAP_ENTITIES(['']);
//   CLEAR_MAP_DATA_SOURCES(['']);

//   CESIUM_ADD_LAYER('helanshan:system_dept', 'guanhuzhan_line');

//   await new Promise((res) => {
//     JIANBIAN(
//       {
//         id: 'helanshan',
//         list: helanshan.features[0].geometry.coordinates[0], // 多边形坐标
//         color1: '#00ffff81',
//         color2: '#f6ffa120',
//         time: 5, // 闪烁3秒
//         flyTo: false,
//         radialGradient: [256, 256, 0, 256, 256, 360],
//       },
//       () => {
//         res();
//         CLEAR_MAP_ENTITIES(['helanshan']);
//         CLEAR_MAP_DATA_SOURCES(['helanshan']);
//       },
//     );
//   });

//   await new Promise((res) => {
//     CESIUM_ADD_REGION_LABEL(cesiumMapLaunch, arealabel, () => {
//       cameraPath(
//         [
//           {
//             destination: {
//               x: -1364250.0023553947,
//               y: 4816562.959617891,
//               z: 3948389.554589816,
//             },
//             heading: 0.06664191051205837,
//             pitch: -0.35610876980800743,
//             roll: 0.00007697532741612889,
//             duration: 30,
//           },

//           {
//             destination: {
//               x: -1366092.38423181,
//               y: 4785471.42936395,
//               z: 3984528.9466198795,
//             },
//             heading: 0.14187455929404447,
//             pitch: -0.2895735429288573,
//             roll: 0.00023066285003192633,
//             // easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
//             easingFunction: Cesium.EasingFunction.LINEAR_NONE,
//             duration: 80,
//           },
//         ],
//         () => {
//           restoration(() => {
//             res();
//             CLEAR_MAP_PRIMITIVES();
//             CESIUM_REMOVE_PROTECT_LABEL();
//           });
//         },
//       );
//     });
//   });

//   await new Promise((res) => {
//     clearArealabelList();
//     CESIUM_ADD_LAYER_FEATUREID('helanshan:system_dept', 'helanshan:default', 1);

//     // CESIUM_ADD_LAYER(MAP_LAYER['管理站'], 'guanlizhan');

//     time = setTimeout(() => {
//       cameraPath([
//         {
//           destination: {
//             x: -1343885.4334249722,
//             y: 4872216.355852587,
//             z: 3936993.093747432,
//           },
//           heading: 0.5223656622688191,
//           pitch: -0.4791565981100776,
//           roll: 0.00028974057189667946,
//           duration: 35,
//         },
//         {
//           destination: {
//             x: -1352264.7871582527,
//             y: 4845465.790910929,
//             z: 3941732.2616560436,
//           },
//           heading: 0.5223656622688129,
//           pitch: -0.47915659811008693,
//           roll: 0.000289740571899344,
//           duration: 35,
//         },
//         {
//           destination: {
//             x: -1359084.1070176845,
//             y: 4810085.235276144,
//             z: 3953151.286570456,
//           },
//           heading: 1.31032081168566,
//           pitch: -0.21910422020650322,
//           roll: 6.283174536239353,
//           duration: 35,
//         },
//         {
//           destination: {
//             x: -1363124.576739438,
//             y: 4810514.794122835,
//             z: 3950440.7339566275,
//           },
//           heading: 0.3778416153042734,
//           pitch: -0.1464816280169965,
//           roll: 6.283163950616697,
//           duration: 35,
//         },
//         {
//           destination: {
//             x: -1363270.7183167501,
//             y: 4809100.390423223,
//             z: 3952222.4595226324,
//           },
//           heading: 0.13470891441540456,
//           pitch: -0.06176576630021291,
//           roll: 6.283178971457325,
//           duration: 35,
//         },
//         {
//           destination: {
//             x: -1358762.4925347364,
//             y: 4808376.408389775,
//             z: 3954627.6891311915,
//           },
//           heading: 1.0906159953920191,
//           pitch: -0.06656229172853245,
//           roll: 6.283176330353976,
//           duration: 35,
//         },
//       ]);

//       time = setTimeout(() => {
//         res();
//       }, 5000);
//     });
//   });
// };

/**
 * 动画效果（天华山动画）
 */
const callBackAnimation = async () => {
  // ✅ 检查是否已销毁
  if (isDestroyed || !cesiumMapLaunch) return;

  CLEAR_MAP_ENTITIES(['']);
  CLEAR_MAP_DATA_SOURCES(['']);

  await new Promise((res) => {
    CESIUM_ADD_REGION_LABEL(cesiumMapLaunch, arealabel, () => {
      cameraPath(
        [
          {
            destination: {
              x: -1672617.1901418974,
              y: 5103106.789408616,
              z: 3475938.048911463,
            },
            heading: 0.20058830555446416,
            pitch: -0.4912833326367658,
            roll: 0.00018479072798083251,
            duration: 40,
          },

          {
            destination: {
              x: -1661113.455923535,
              y: 5060907.329083856,
              z: 3512040.9153048964,
            },
            heading: 0.23537861235320712,
            pitch: -0.3077724340932668,
            roll: 6.28310140978094,
            // easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
            easingFunction: Cesium.EasingFunction.LINEAR_NONE,
            duration: 40,
          },
          {
            destination: {
              x: -1651553.1712962484,
              y: 5055323.965132234,
              z: 3527986.680673667,
            },
            heading: 1.9841483557349022,
            pitch: -0.42575514370074563,
            roll: 6.283177084956955,

            // easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
            easingFunction: Cesium.EasingFunction.LINEAR_NONE,
            duration: 20,
          },
          {
            destination: {
              x: -1670683.7628391122,
              y: 5056080.494761914,
              z: 3517880.6239188244,
            },
            heading: 1.9841504123747953,
            pitch: -0.42575315449162354,
            roll: 6.283172105292468,
            // easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
            easingFunction: Cesium.EasingFunction.LINEAR_NONE,
            duration: 40,
          },
          {
            destination: {
              x: -1697212.1661721466,
              y: 5068006.936529457,
              z: 3496676.3608051366,
            },
            heading: 5.604967300486699,
            pitch: -0.45196953151434105,
            roll: 0.0003044859258327648,
            // easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
            easingFunction: Cesium.EasingFunction.LINEAR_NONE,
            duration: 10,
          },
        ],
        () => {
          restoration(() => {
            res();
            CLEAR_MAP_PRIMITIVES();
            CESIUM_REMOVE_PROTECT_LABEL();
          });
        },
      );
    });
  });
};

/**
 *视角复原
 * @return {*}
 */
async function restoration(callBack) {
  return new Promise((res) => {
    cesiumMapLaunch.camera.flyTo({
      destination: {
        x: -1358454.6269712178,
        y: 4832095.091459731,
        z: 3940369.4514063452,
      },
      orientation: {
        heading: 0.3433429143291651,
        pitch: -0.26029306829175214,
        roll: 0.00030567894613131585,
      },
      duration: 50,
      easingFunction: Cesium.EasingFunction.SINUSOIDAL_IN_OUT,
      complete: function callback() {
        // callBack();
        res();
        callBack && callBack();
      },
    });
  });
}

//清除动画
const stopAnimation = () => {
  clearTimeout(time);

  getCesiumMap().camera.cancelFlight();

  CLEAR_MAP_PRIMITIVES(); // 清除图元
  CLEAR_MAP_ENTITIES();
  clearArealabelList();
  clearTimeout(terrainTimeoutId);
  terrainTimeoutId = null;
  time = null;
};

onBeforeUnmount(() => {
  stopAnimation();
  destroyCesiumViewer();
});
</script>
<template>
  <div class="relative h-100% w-100%">
    <LaunchHeadersIndex
      :screen-title="CURRENT_CONFIG?.VITE_APP_NAME"
      @click="
        () => {
          getCameraPosition(cesiumMapLaunch);
        }
      "
    />
    <div class="left-launch" />
    <div class="right-launch" />
    <div id="map-launch" class="h-100% w-100%"></div>

    <div class="navigation-home-main h-800px w-100% flex items-center justify-center">
      <CircleCardCarousel :list="finalCardList" />
    </div>

    <!-- 个人中心 -->
    <PersonalCenterIndex />
  </div>
</template>

<style scoped lang="scss">
.left-launch {
  position: absolute;
  left: -10px;
  z-index: 1;
  width: 496px;
  height: 100%;
  background: linear-gradient(
    -89.47deg,
    rgba(62, 173, 147, 0) 25.204%,
    rgba(9, 49, 93, 0.5) 68.643%,
    rgba(9, 49, 93, 0.6) 77.153%
  );
  filter: blur(40px);
}
.right-launch {
  position: absolute;
  right: -4.625rem;
  z-index: 1;
  width: 31rem;
  height: 100%;
  background: linear-gradient(
    95.47deg,
    rgba(62, 173, 147, 0) 0.204%,
    rgba(9, 49, 93, 0.5) 51.643%,
    rgb(9, 49, 93) 98.153%
  );
  filter: blur(2.5rem);
}
</style>
